<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '/@/store/modules/user'

const router = useRouter()
const userStore = useUserStore()

const activeMenu = ref('dashboard')

const menuItems = [
  {
    key: 'dashboard',
    title: '仪表盘',
    icon: 'fa fa-dashboard'
  },
  {
    key: 'articles',
    title: '我的文章',
    icon: 'fa fa-file-text'
  },
  {
    key: 'diary',
    title: '日记',
    icon: 'fa fa-book'
  },
  {
    key: 'pages',
    title: '页面',
    icon: 'fa fa-file'
  },
  {
    key: 'comments',
    title: '评论',
    icon: 'fa fa-comments'
  },
  {
    key: 'settings',
    title: '设置',
    icon: 'fa fa-cog'
  }
]

const userStats = ref({
  articles: 23,
  followers: 156,
  following: 89
})

const handleMenuClick = (key: string) => {
  activeMenu.value = key
  router.push(`/home/user/profile/${key}`)
}
</script>

<template>
  <div class="profile-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="user-cover"></div>
        <div class="user-info">
          <div class="avatar-wrapper">
            <img :src="userStore.avatar" alt="avatar" class="avatar" />
            <div class="online-status"></div>
          </div>
          <h3 class="username">{{ userStore.username }}</h3>
          <p class="user-bio">前端开发工程师 / Vue.js爱好者</p>
          <div class="user-stats">
            <div class="stat-item">
              <div class="stat-value">{{ userStats.articles }}</div>
              <div class="stat-label">文章</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ userStats.followers }}</div>
              <div class="stat-label">关注者</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ userStats.following }}</div>
              <div class="stat-label">关注中</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 导航菜单 -->
      <div class="menu">
        <div
          v-for="item in menuItems"
          :key="item.key"
          class="menu-item"
          :class="{ active: activeMenu === item.key }"
          @click="handleMenuClick(item.key)"
        >
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  display: flex;
  min-height: calc(100vh - 70px);
  background-color: #f0f2f5;
}

.sidebar {
  width: 280px;
  background-color: white;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: calc(100vh - 70px);
  overflow-y: auto;
}

/* 用户卡片样式 */
.user-card {
  position: relative;
  background: white;
  margin-bottom: 24px;
}

.user-cover {
  height: 80px;
  background: linear-gradient(120deg, #1890ff, #722ed1);
}

.user-info {
  padding: 0 24px 24px;
  text-align: center;
  margin-top: -40px;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.online-status {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  background-color: #52c41a;
  border-radius: 50%;
  border: 2px solid white;
}

.username {
  font-size: 20px;
  font-weight: 600;
  color: #1f1f1f;
  margin: 16px 0 4px;
}

.user-bio {
  color: #666;
  font-size: 14px;
  margin: 0 0 16px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* 菜单样式 */
.menu {
  padding: 8px 16px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
}

.menu-item:hover {
  background-color: #f5f5f5;
  color: #1890ff;
}

.menu-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: 500;
}

.menu-item i {
  width: 20px;
  margin-right: 12px;
  font-size: 16px;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  margin-left: 280px;
  padding: 24px;
  background-color: transparent;
}

@media (max-width: 768px) {
  .sidebar {
    width: 80px;
    padding: 12px 0;
  }

  .user-card {
    display: none;
  }

  .menu-item {
    padding: 12px;
    justify-content: center;
  }

  .menu-item span {
    display: none;
  }

  .menu-item i {
    margin-right: 0;
    font-size: 20px;
  }

  .main-content {
    margin-left: 80px;
    padding: 16px;
  }
}
</style> 